autofill 배경 변경
✒️ 2025-05-16 12:36 내용 수정
참고 자료 : css-tricks change-autocomplete-styles-webkit-browsers, velog docchi 태그 자동완성 시 배경색 변경, mdn web docs CSS Cascade
문제 상황
- 유투브 클론코딩 팀 프로젝트를 진행하면서
input에 자동 완성으로 텍스트를 채우면 내부 스타일이 자동으로 생성되었다.


- 개발자 도구에서 확인해보면 사용자 에이전트 스타일시트(User Agent StyleSheet, 브라우저 기본 제공)에
input:-infernal-autofill-selected선택자에background-color와color가 설정되어 있다.

해결 방법
:autofill가상 클래스와::-webkit-autofill가상 선택자를 사용하여 자동 완성 시 필드의 스타일을 변경할 수 있다.- Chrome과 같은 Webkit 기반 브라우저에선
::-webkit-autofill을 사용하여 스타일을 변경한다. - 적용 결과 Chrome에서
autofill과::-webkit-autofill모두 적용되었다.- 브라우저 상황에 따라 둘 중 하나를 골라서 적용하면 된다.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
border : none;
-webkit-text-fill-color: white;
-webkit-box-shadow: 0 0 0px 1000px #303030 inset;
box-shadow: 0 0 0px 1000px #303030 inset;
transition: background-color 5000x ease-in-out 0s;
}
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
-webkit-text-fill-color: white;
-webkit-box-shadow: 0 0 0px 1000px #303030 inset;
box-shadow: 0 0 0px 1000px #303030 inset;
transition: background-color 5000s ease-in-out 0s;
}
border와-webkit-text-fill-color설정을 테스트를 위해 잘 보이는 색으로 지정했을 때 자동 완성 후 스타일이 바뀐 것을 확인할 수 있다.

border:none을 설정하고, 색상과 배경을 다른 요소에 맞췄을 때 텍스트만 깔끔하게 보인다.

- 이 방법을 적용했을 때 자동 완성 텍스트 입력 직후에 글자가 지정했던 색이 아닌 다른 색이 뜨는 문제는 아직 해결 방법을 찾지 못했다.